<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,
        div,
        img {padding: 0;margin: 0;box-sizing: border-box}

        .box {
            width: 640px;
            height: 360px;
            position: relative;
        }

        .box > img {
            width: 640px
        }

        .box .big {visibility: hidden;
            width: 600px;
            height: 600px;
            position: absolute;
            left: 650px;
            top: 0;
            overflow: hidden;
        }

        .box .big > img {
            width: 3840px;
            position: absolute;
        }

        .box .masking {position: absolute;visibility: hidden;background-color: rgba(0, 0, 0, .3);}
    </style>
</head>
<!--
    说明：所有元素均存于box中，box宽高必须指定；
    主图指定宽为box宽即可（img宽高默认自适应）；
    大图需指定宽度；
    速览区宽高自定，但必须是正方形；
    速览区是根据box绝对定位的，可以自行设置，别挡住主图即可；
    图片放大比例是由大图宽度/主图宽度计算得出；
    小蒙版宽高是由放大比例和速览区宽高计算得出。
    也可以自行封装函数，比如用传参方式确定元素尺寸和放大比例~
-->
<body>
<p style="height: 50px;"></p>
<div class="box">
    <img src="image/bg.jpg" alt="">
    <div class="masking"></div>
    <div class="big">
        <img src="image/bg.jpg" alt="">
    </div>
</div>
233
</body>
<script>
    window.onload = function () {
        let small = document.querySelector('.box');
        let bigBox = document.querySelector('.big');
        let big = document.querySelector('.big img');
        let scale = big.clientWidth / small.clientWidth;
        let masking = bigBox.clientWidth / scale / 2;
        let maxLeft = small.clientWidth - masking;
        let maxTop = small.clientHeight - masking;
        let mask = document.querySelector('.masking');
        mask.style.height = masking * 2 + 'px';
        mask.style.width = masking * 2 + 'px';
        small.addEventListener('mouseover', function () {
            bigBox.style.visibility = 'visible';
            mask.style.visibility = 'visible';
        });
        small.addEventListener('mouseout', function () {
            bigBox.style.visibility = 'hidden';
            mask.style.visibility = 'hidden';
        });
        small.addEventListener('mousemove', function (e) {
            let x = e.pageX - small.offsetLeft;
            let y = e.pageY - small.offsetTop;
            big.style.left = '-' + (x > maxLeft ? maxLeft - masking : x - masking) * scale + 'px';
            big.style.top = '-' + (y > maxTop ? maxTop - masking : y - masking) * scale + 'px';
            mask.style.left = (x - masking) <= 0 ? 0 : (x >= maxLeft ? maxLeft : x) - masking + 'px';
            mask.style.top = (y - masking) <= 0 ? 0 : (y >= maxTop ? maxTop : y) - masking + 'px';
        })
    }
</script>
</html>